<script setup>
import { useRouter } from "vue-router";
import TopButton from "@/components/Pengyq/TopButton.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
// setTimeout(() => {
//   router.push("conShop");
// }, 3000);
</script>
<template>
  <div class="StoreTimer">
    <TopButton :title="'Apply  Store'" />
    <div class="mask"></div>
    <div class="content">
      <div class="timer">
        <img src="/images/Me/路径_2@2x.png" alt="" />
      </div>
      <h5>{{ $t("applyStore.title") }}</h5>
      <pre class="tip">
        {{ $t("applyStore.tip") }}
      </pre>
      <!-- <p>You can get your own store by applying</p> -->
      <pre class="textColor">
   <!-- If you find that the store location information
    does not match, or engage in other illegal acts, 
    etc., we will ban your account and add legal 
                              liability -->
      </pre>
    </div>
  </div>
</template>

<style scoped lang="scss">
.StoreTimer {
  padding-top: 60rem;
  font-size: 14rem;
  background-color: #f5f5f5;
  height: max-content;

  .mask {
    width: 100%;
    height: 150rem;
    border-radius: 0 0 100% 50%/30%;
    background-color: rgba(100, 46, 142, 1);
  }

  .content {
    padding: 40rem 0 280rem;
    transform: translateY(-130rem);
    width: 90%;

    background-color: #fff;
    border-radius: 6rem;
    margin: 0 auto;

    .timer {
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80rem;
      height: 80rem;
      background-color: rgba(100, 46, 142, 1);
      border-radius: 50%;

      img {
        width: 25rem;
      }
    }

    >h5 {
      text-align: center;
      line-height: 60rem;
      font-weight: 500;
      font-size: 18rem;
      margin: 0 auto;
    }

    .tip {
      word-wrap: break-word;
      white-space: pre-wrap;
      text-align: center;
      padding-right: 20px;
    }

    >p {
      text-align: center;
      font-size: 16rem;
    }

    pre {
      font-size: 15rem;
      font-family: "Helvetica";
    }

    .textColor {
      color: rgba(100, 46, 142, 1);
    }
  }
}
</style>
